<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js本地实现测试</title>
    <script src="/static/js/simple_chart.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            margin: 0;
        }
        .chart-container {
            width: 500px;
            height: 300px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>Chart.js本地实现测试</h1>
    <div class="chart-container">
        <canvas id="testChart"></canvas>
    </div>
    
    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM已加载，开始测试Chart.js');
            console.log('Chart对象是否存在:', typeof Chart !== 'undefined');
            console.log('waitForChart函数是否存在:', typeof waitForChart !== 'undefined');
            
            // 尝试直接使用Chart
            if (typeof Chart !== 'undefined') {
                console.log('直接使用Chart对象成功');
                try {
                    const ctx = document.getElementById('testChart').getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: ['A', 'B', 'C', 'D', 'E'],
                            datasets: [{
                                label: '测试数据',
                                data: [12, 19, 3, 5, 2],
                                backgroundColor: 'rgba(54, 162, 235, 0.7)'
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false
                        }
                    });
                } catch (error) {
                    console.error('直接使用Chart失败:', error);
                }
            } else {
                console.log('Chart对象不存在，尝试使用waitForChart');
                
                // 尝试使用waitForChart
                if (typeof window.waitForChart !== 'undefined') {
                    window.waitForChart(function(Chart) {
                        console.log('通过waitForChart获取到Chart对象');
                        try {
                            const ctx = document.getElementById('testChart').getContext('2d');
                            new Chart(ctx, {
                                type: 'bar',
                                data: {
                                    labels: ['A', 'B', 'C', 'D', 'E'],
                                    datasets: [{
                                        label: '测试数据',
                                        data: [12, 19, 3, 5, 2],
                                        backgroundColor: 'rgba(54, 162, 235, 0.7)'
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false
                                }
                            });
                        } catch (error) {
                            console.error('通过waitForChart使用Chart失败:', error);
                        }
                    });
                } else {
                    console.error('waitForChart函数不存在');
                }
            }
        });
    </script>
</body>
</html>